import React, { Component } from 'react';
import App from 'layout/App.js'
import './index.less';
import { Icon, Table, FormControl, Button, Col, Row, Select, Breadcrumb, Checkbox, Modal } from 'tinper-bee';
import { searchProjects, searchAllCatas, editWorkDataCata, saveWorkDataDoc, searchCollateDetail, getPrintCode, getPrintCodeByType, getQuoteNameAndPk, downloadTemplate } from './workdatadoc.config'
import { vendorsDanger as danger, vendorsSuccess as success, vendorsFmtDate as fmtDate, vendorsTrimStr as trimStr } from 'utils/config.js';
import CommonModal from './../../components/CommonModal/index.jsx';
import { selectFile, handleSelectFile } from './uploadhelper';
import Previewer from './previewer.jsx';

let projectflag = false;
let cataflag = false;

import Tooltip from 'bee-tooltip';
import 'bee-tooltip/build/Tooltip.css';
const textOverflowIndex = 10; // 控制项目名称在多少个字符后隐藏

import jdiwork from '../../utils/jdiwork'
let tenantId;
let cookieStr = document.cookie.split(';').find(cur => cur.indexOf('tenantid=') != -1)
if (cookieStr) {
    tenantId = cookieStr.split('=')[1];
}

//let tenantId ="x61tnmfx";
export default class WorkDataDoc extends Component {
    constructor(props) {
        super(props);

        let editFlag = false;
        let showFlag = false;
        if (sessionStorage.getItem("editdoc")) {
            editFlag = true;
        }

        if (sessionStorage.getItem("showdoc")) {
            showFlag = true;
        }

        this.state = {
            projectsList: [],
            cataList: [],
            project: {},
            cata: {},
            editFlag: editFlag,
            showFlag: showFlag,
            tableData: [],
            collateDetail: {},
            tocommit: false,
            docname: '',
            lengthexceed: false,
            checkedAll: false,
        };
    }


    componentDidMount() {
        let docpagestate = sessionStorage.getItem("docpagestate");
        let _me = this;

        if (docpagestate) {
            let tempstate = JSON.parse(docpagestate);

            if (!sessionStorage.getItem("fromSubmit")) {
                _me.setState(tempstate);
                sessionStorage.removeItem("docpagestate");
                return;
            }
            sessionStorage.removeItem("fromSubmit");

            let billpks = JSON.parse(sessionStorage.getItem('procedurePkArr'));

            let billtype = sessionStorage.getItem("billType");
            sessionStorage.removeItem("billType");

            let currentrecord = tempstate.tableData.find(cur => {
                return cur.pkCompletedCatalogB == sessionStorage.getItem('pkCompletedCatalogB');
            });

            if (billtype == 'GXBY') {
                getQuoteNameAndPk(billpks).then(function (response) {
                    if (response.data.resultCode != 'busi_ex') {
                        let data = response.data.result;

                        let datalast = [];
                        let sequence = 0;

                        data.forEach(cur => {
                            cur.sequence = sequence++;
                            cur.pkBill = cur.pk;
                            cur.billType = 'GXBY';
                            cur.sname = cur.name + '工序报验';
                            datalast.push(cur);
                            cur.subObjs.forEach(curli => {
                                curli.sequence = sequence++;
                                curli.pkBill = curli.pk;
                                curli.billType = 'SGJL';
                                curli.sname = curli.name + '施工记录';
                                curli.pkProcedure = cur.pkProcedure;
                                datalast.push(curli);
                            });
                        });

                        currentrecord.contentVOS = datalast;
                        currentrecord.contentVOSShow = data;

                    } else {
                        danger({ 'text': response.data.exMsg });
                    }

                    _me.setState(tempstate);
                    sessionStorage.removeItem("docpagestate");
                });

            } else if (billtype = 'SGJL') {
                let sequence = 0;

                billpks.forEach(cur => {
                    cur.sequence = sequence++;
                    cur.billType = 'SGJL';
                    cur.sname = cur.inspectStandardName + '施工记录';
                });


                currentrecord.contentVOS = billpks;
                currentrecord.contentVOSShow = billpks;


                _me.setState(tempstate);
                sessionStorage.removeItem("docpagestate");
            } else {
                _me.setState(tempstate);
                sessionStorage.removeItem("docpagestate");
            }

            return;

        }

        searchProjects({ 'isAjax': 1, ieStamp: new Date().getTime(), pkTenant: tenantId })
            .then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result.objects;
                    data.forEach((cur, index) => {
                        cur.key = cur.sname;
                        cur.value = cur.pkProject;
                    });
                    _me.setState({
                        projectsList: data,
                        project: data.length > 0 ? data[0] : {}
                    });
                    projectflag = true;

                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });


        searchAllCatas({ 'isAjax': 1, ieStamp: new Date().getTime() })
            .then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result;

                    data.forEach((cur, index) => {
                        cur.key = cur.sname;
                        cur.value = cur.pkCompletedCatalog;
                    });
                    _me.setState({
                        cataList: data,
                    });
                    cataflag = true;
                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });


        let docpk = sessionStorage.getItem('editdoc');
        let showdocpc = sessionStorage.getItem('showdoc');

        if (docpk || showdocpc) {
            searchCollateDetail({ isAjax: 1, ieStamp: new Date().getTime(), pkCompletedCollate: docpk || showdocpc }).then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result;

                    //没有排序，采用返回的排序
                    data.collateBVOS.forEach((cur, index) => {
                        cur.key = cur.pkCompletedCollateB;
                        cur.sname = cur.catalogDetailName;
                    });

                    _me.getTableData(data.collateBVOS);

                    data.collateBVOS.forEach(cur => {
                        if (cur.datumContent == 'GXBY') {
                            cur.contentVOSShow = _me.listToTree(cur.contentVOS || []);
                        } else if (cur.datumContent == 'SGJL') {
                            cur.contentVOSShow = cur.contentVOS;
                        }
                    });

                    _me.setState({
                        docname: data.sname,
                        tableData: data.collateBVOS,
                        collateDetail: data
                    });

                    let check = setInterval(function () {
                        if (projectflag && cataflag) {

                            _me.setState({
                                project: _me.state.projectsList.find(cur => cur.pkProject == data.pkProject) || {},
                                cata: _me.state.cataList.find(cur => cur.pkCompletedCatalog == data.pkCompletedCatalog) || {}
                            });
                            clearInterval(check);
                        }

                    }, 100);

                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });
        }
    }

    listToTree = (list) => {
        let result = [];
        list.forEach(cur => {
            if (cur.billType == 'GXBY') {
                result.push(cur);
            } else {
                if (result[result.length - 1].subObjs) {
                    result[result.length - 1].subObjs.push(cur);
                } else {
                    result[result.length - 1].subObjs = [cur];
                }

            }
        });

        return result;
    }


    projectChange = (e) => {
        let divNode = document.getElementsByClassName('u-select-selection-selected-value')[0]; // 清空下拉框的鼠标hover时候的title值
        setTimeout(() => {
            divNode.setAttribute("title", "");
        }, 500);
        this.setState({
            project: this.state.projectsList.find(cur => cur.pkProject == e),
        });

        if (this.state.cata.pkCompletedCatalog) {

            this.refreshBodyList(this.state.cata);
        }
    }

    cataChange = (e) => {
        console.log('catachange');
        let selectedCata = this.state.cataList.find(cur => cur.pkCompletedCatalog == e);
        this.setState({
            cata: selectedCata,
        });

        this.refreshBodyList(selectedCata);
    }

    refreshBodyList = (selectedCata) => {
        let _me = this;

        editWorkDataCata({ 'isAjax': 1, ieStamp: new Date().getTime(), pkCompletedCatalog: selectedCata.pkCompletedCatalog })
            .then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result;

                    let tableData = _me.getTableData(data.completedCatalogBVOS);

                    _me.setState({
                        tableData: tableData,
                    });

                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });
    }

    getTableData = (data) => {
        for (var i = 0; i < data.length; i++) {
            var item = data[i];
            var itemContent = item.datumContent;
            item["key"] = item["pkCompletedCatalogB"];
            item["dangerBorder"] = "";
            let temp = (i + 1).toString();
            temp = temp.length < 2 ? 0 + temp : temp;
            item.number = temp;
            item.catalogDetailName = item.sname;
            if (item.datumType == 1) {
                //item.datumContentScode = item.datumContent;
                item.selectfile = true;
                if (item.contentVOS) {
                    item.contentVOS.forEach(cur => {
                        cur.percent = 100;
                    })
                }
            } else {

                if (itemContent == "GXBY") {
                    item.datumContentScode = "工序报验"
                } else if (itemContent == "SGJL") {
                    item.datumContentScode = "施工记录"
                } else if (itemContent == "XCJC") {
                    item.datumContentScode = "现场检查"
                } else if (itemContent == "WTJL") {
                    item.datumContentScode = "问题记录"
                } else if (itemContent == "GXPZ") {
                    item.datumContentScode = "工序拍照"
                } else if (itemContent == "GZLX") {
                    item.datumContentScode = "工作联系"
                } else if (itemContent == "JDJH") {
                    item.datumContentScode = "进度计划"
                } else if (itemContent == "JDFK") {
                    item.datumContentScode = "进度反馈"
                } else if (itemContent == "ZHYS") {
                    item.datumContentScode = "综合验收"
                }
            }
        }
        return data;
    };

    docnameChanged = (e) => {
        if (e.target.value.length > 50) {
            this.setState({
                lengthexceed: true
            })

            setTimeout(() => {
                this.setState({
                    lengthexceed: false
                })
            }, 1000);

            return;
        }
        this.setState({
            docname: e.target.value
        })
    }

    editRow = (record, e) => {
        console.log('编辑行');
        if (!this.state.project.pkProject) {
            danger({ 'text': '请选择项目' });
            return;
        }

        let pkbills = [];

        if (record.contentVOSShow) {
            record.contentVOSShow.forEach(cur => {
                pkbills.push(cur.pkBill);
            })

        }

        sessionStorage.setItem("pkProject", this.state.project.pkProject);
        sessionStorage.setItem("projectName", this.state.project.sname);
        sessionStorage.setItem("billType", record.datumContent);
        sessionStorage.setItem("procedurePkArr", JSON.stringify(pkbills));
        sessionStorage.setItem("docpagestate", JSON.stringify(this.state));
        sessionStorage.setItem("pkCompletedCatalogB", record.pkCompletedCatalogB);

        window.location.href = "./workdatausedata.html";
    }

    handleSaveData = () => {

        this.state.docname = trimStr(this.state.docname);
        this.setState({
            tocommit: true
        })
        if (!(this.state.project.pkProject && this.state.cata.pkCompletedCatalog && this.state.docname)) {
            return;
        }
        let result = this.state.collateDetail;
        result.sname = this.state.docname;
        result.pkProject = this.state.project.pkProject;
        result.pkCompletedCatalog = this.state.cata.pkCompletedCatalog;
        result.catalogName = this.state.cata.sname;

        result.collateBVOS = this.state.tableData;
        result.ieStamp = new Date().getTime();


        saveWorkDataDoc(result).then(function (response) {
            if (response.data.resultCode != 'busi_ex') {
                window.location.href = "./workdataref.html";

            } else {
                danger({ 'text': response.data.exMsg });
            }
        });
    }

    handleCancelClick = () => {
        this.setState({
            cancelState: true
        })
    }

    handleCloseModel = () => {
        this.setState({
            cancelState: false
        })
    }

    handleJumpDoc = () => {
        window.location.href = "./workdataref.html";
    }

    handleReturnClick = () => {
        sessionStorage.removeItem('showdoc');
        window.location.href = "./workdataref.html";

    }

    toBillDetail = (item, billType, e) => {
        e.preventDefault();
        let pk = item.pkBill;
        // let boCode = billtype == 'GXBY' ? 'pmbd_procedureinspect' : 'pm_constructionlog';
        let apiname = billType == 'GXBY' ? 'printPreviewProcedureInspect' : 'printPreviewConstructionLog';

        getPrintCodeByType({
            'isAjax': 1,
            ieStamp: new Date().getTime(),
            // boCode: boCode, 
            tenantId: tenantId,
            billType: billType,
            pkProcess: item.pkProcedure,
        })
            .then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let data = response.data.result;

                    let url = `./print/preview?serverUrl=/completedCollate/preview/${apiname}&printcode=${data}&tenantId=${tenantId}&sendType=2&params={"pkBill":"${pk}"}`;

                    window.open(encodeURI(url));

                    return;

                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });

    }

    handleCheckChanged = (record, e) => {
        record.checked = e;
        let checkedall = true;
        for (let i = 0; i < this.state.tableData.length; i++) {
            if (!this.state.tableData[i].checked) {
                checkedall = false;
                break;
            }
        }

        this.setState({
            checkedAll: checkedall
        })
    }

    onAllCheckChange = (e) => {
        this.state.tableData.forEach(cur => cur.checked = e);
        this.setState({
            checkedAll: e
        })
    }

    viewTemplate = (ossName, percent) => {
        // console.log("ossName====percent"+(ossName)+(percent))
        if (percent < 100) {
            danger({ 'text': '请等待文件上传完成后再进行预览！' });
            return;
        }
        this.setState({
            showViewModal: true,
            viewossName: ossName
        })
    }

    downloadTemplate = (record) => {
        downloadTemplate({ ossName: record.ossName, 'isAjax': 1, ieStamp: new Date().getTime() })
            .then(function (response) {
                if (response.data.resultCode != 'busi_ex') {
                    let url = response.data.result;
                    let a = document.createElement('a');
                    var filename = ''//record.datumContent;不知道为啥原来的人要把字段注释
                    // a.href = url;
                    a.download = filename;
                    document.createElement("head");

                    if (record.ossName.toLowerCase().endsWith('.pdf')) {
                        a.target = '_blank';
                    }
                    window.open(url);
                    a.click();


                } else {
                    danger({ 'text': response.data.exMsg });
                }
            });
    }

    addActualFile = (record) => {

    }

    deleteFile = (cur, arr) => {
        cur.valid = false;
        let i = arr.indexOf(cur);
        arr.splice(i, 1);
        this.forceUpdate();
    }

    closeViewModal = () => {
        this.setState({
            showViewModal: false
        })
    }


    render() {

        let _me = this;
        const columns6 = [
            {
                title: (
                    <Checkbox
                        className="table-checkbox"
                        checked={this.state.checkedAll}
                        onChange={this.onAllCheckChange}
                    />
                ),
                dataIndex: "ischeck",
                key: "ischeck",
                width: '4%',
                render(text, record, index) {
                    return (
                        <Checkbox checked={record.checked} onChange={_me.handleCheckChanged.bind(null, record)} />
                    )
                }

            },
            { title: "序号", dataIndex: "number", key: "a", width: '4%' },
            { title: "清单名称", dataIndex: "catalogDetailName", key: "b", width: 150 },
            {
                title: "单据类型/模板", dataIndex: "datumContentScode", key: "c", width: 100,
                render(text, record, index) {
                    if (!record.selectfile) {
                        return text;
                    } else {
                        return (<div>
                            <div className="hrowop">
                                <span onClick={_me.viewTemplate.bind(null, record.ossName)}>{record.datumContent}</span>
                                &nbsp;&nbsp;&nbsp;
                                <span style={{ visibility: _me.state.showFlag ? 'collapse' : 'visible' }} onClick={_me.downloadTemplate.bind(null, record)}>下载</span>
                            </div>
                        </div>);
                    }
                }
            },
            {
                title: "资料内容", dataIndex: "contentVOSShow", key: "d", width: 200,
                render(text, record, index) {
                    let result = [];
                    if (text && record.datumContent == 'GXBY') {
                        result = text.map(cur => {
                            let temp = cur.subObjs && cur.subObjs.map(curli => <div><span className="hbilldetail" onClick={(e) => {
                                if (tenantId) {
                                    _me.toBillDetail(curli, 'SGJL', e);
                                } else {
                                    jdiwork().getContext((data) => {
                                        tenantId = data.tenantid;
                                        _me.toBillDetail(curli, 'SGJL', e)
                                    });
                                }
                            }}>{curli.sname}</span></div>);
                            return (<div className="hprocesscheckdiv">
                                <div>
                                    <span className="hbilldetail" onClick={(e) => {
                                        if (tenantId) {
                                            _me.toBillDetail(cur, 'GXBY', e)
                                        } else {
                                            jdiwork().getContext((data) => {
                                                tenantId = data.tenantid;
                                                _me.toBillDetail(cur, 'GXBY', e)
                                            });
                                        }
                                    }}>{cur.sname}
                                    </span>
                                </div>
                                {temp}
                            </div>);
                        });


                    } else if (text && record.datumContent == 'SGJL') {
                        result = text.map(cur => {
                            return (
                                <div>
                                    <span className="hbilldetail" onClick={(e) => {
                                        if (tenantId) {
                                            _me.toBillDetail(cur, 'SGJL', e)
                                        } else {
                                            jdiwork().getContext((data) => {
                                                tenantId = data.tenantid;
                                                _me.toBillDetail(cur, 'SGJL', e)
                                            });
                                        }
                                    }}

                                    >{cur.sname}
                                    </span>
                                </div>
                            );
                        });

                        return (
                            <div style={{ margin: '-8px 0px' }}>
                                {result}
                            </div>
                        )
                    } else if (record.selectfile) {
                        let f = [];
                        if (record.contentVOS) {
                            f = record.contentVOS.map((cur, i) => {
                                let percenttext = cur.percent == 100 ? '' : `(${cur.percent}%)`;
                                return (
                                    <div className="hrowop">
                                        <span onClick={_me.viewTemplate.bind(null, cur.ossName, cur.percent)}>{_me.state.showFlag ? cur.sname : `${cur.sname + percenttext}`}</span>
                                        &nbsp;&nbsp;&nbsp;
                                        <span style={{ visibility: _me.state.showFlag ? 'collapse' : 'visible' }} onClick={_me.deleteFile.bind(null, cur, record.contentVOS)}>删除</span>
                                    </div>
                                );
                            })
                        }
                        return (
                            <div>{f}</div>
                        )
                    }


                    return (
                        <div className="hbilldetaildiv">
                            {result}
                        </div>
                    )
                }
            },
            {
                title: "操作", dataIndex: "pkCompletedCatalogB", key: "f",
                render(text, record, index) {
                    let r = false;
                    if (record.selectfile) {
                        r = <span onClick={selectFile.bind(_me, record)}>添加文件</span>;
                    } else if (record.datumContentScode) {
                        r = <span onClick={_me.editRow.bind(null, record)}>关联单据</span>;
                    }

                    return (
                        <div className="hrowop">
                            {r}
                        </div>
                    );
                }, width: 50
            }
        ];

        if (this.state.showFlag) {
            columns6.pop();
            columns6.shift();
        } else {
            columns6.shift();
        }


        const projectsList = this.state.projectsList.map(cur => 
            {
                let text = cur.sname;
				let displayText = text.length > textOverflowIndex ? text.substr(0, textOverflowIndex) + "..." : text;
                return (
                    <Option value={cur.pkProject} name={cur.sname}>
                    <Tooltip
                        className={[text.length > textOverflowIndex ? "show" : "hidden"]}
                        inverse
                        placement="top"
                        overlay={text}>
                        <div>{displayText}</div>
                    </Tooltip>
                </Option>
                )
            }
        );

        const cataList = this.state.cataList.map(cur => <Option value={cur.pkCompletedCatalog}>{cur.sname}</Option>);

        const projectToFill = this.state.tocommit && !this.state.project.pkProject;

        const cataToFill = this.state.tocommit && !this.state.cata.pkCompletedCatalog;

        const docnameToFill = this.state.tocommit && !this.state.docname;

        return (
            <App>
                <div className="workdata">
                    <div className="workdata__header clearfix">
                        <div className="workdata__header__left">
                            <Breadcrumb>
                                <Breadcrumb.Item active>
                                    资料列表
                                </Breadcrumb.Item>
                                <Breadcrumb.Item active>
                                    添加资料
                                </Breadcrumb.Item>
                            </Breadcrumb>
                        </div>
                        {(this.state.editFlag || this.state.showFlag) && <div className="workdata__header__right">
                            <ul className="clearfix">
                                <li className="magin-li">
                                    <span>创建人:</span>
                                    <span>{this.state.collateDetail.creatorName}</span>
                                </li>
                                <li>
                                    <span> 创建时间:</span>
                                    <span>{fmtDate(this.state.collateDetail.creationtime)}</span>
                                </li>
                            </ul>
                        </div>}
                    </div>
                    <div className="workdata__content">
                        <div className="workdata__content__header clearfix">
                            <div className="workdata__content__title">基本信息</div>
                            {
                                this.state.showFlag ?
                                    <div className="workdata__content__btngroup">
                                        <Button isSubmit={true} className="cancel" onClick={this.handleReturnClick}>返回</Button>
                                    </div> :
                                    <div className="workdata__content__btngroup">
                                        <Button colors="primary" className="save" onClick={this.handleSaveData}>保存</Button>
                                        <Button isSubmit={true} className="cancel" onClick={this.handleCancelClick}>取消</Button>
                                        <CommonModal show={this.state.cancelState}
                                            cancel={this.handleCloseModel}
                                            confirm={this.handleJumpDoc}
                                            content={'取消后本次所填信息将会丢失！清确认'}
                                            backdrop={false}
                                            bindCancel={true}
                                        />
                                    </div>
                            }

                        </div>
                        <div className="workdatadocbody">
                            <Row>
                                <Col md={6} sm={6} xs={6}>
                                    <div className="colBox">
                                        <div className="hfieldname">项目名称：</div>
                                        <Select disabled={this.state.showFlag} className={projectToFill ? 'hinputrequired' : ''} showSearch value={this.state.project.pkProject} style={{}} placeholder="请选择项目" allowClear={false} optionFilterProp="name" notFoundContent="没有相关条目" dropdownMatchSelectWidth={false} onChange={this.projectChange}  >
                                            {projectsList}
                                        </Select>
                                        <div style={{ display: projectToFill ? "block" : "none" }}><span className="hrequired">请选择项目</span></div>
                                    </div>

                                </Col>
                                <Col md={6} sm={6} xs={6}>
                                    <div className="colBox">
                                        <div className="hfieldname">目录名称：</div>
                                        <Select disabled={this.state.showFlag} className={cataToFill ? 'hinputrequired' : ''} showSearch value={this.state.cata.pkCompletedCatalog} style={{}} placeholder="请选择目录" optionFilterProp="children" notFoundContent="没有相关条目" dropdownMatchSelectWidth={false} onChange={this.cataChange}>
                                            {cataList}
                                        </Select>
                                        <div style={{ display: cataToFill ? "block" : "none" }}><span className="hrequired">请选择目录</span></div>
                                    </div>
                                </Col>

                                <Col md={6} sm={6} xs={6}>
                                    <div className="colBox">
                                        <div className="hfieldname">资料名称：</div>
                                        <FormControl disabled={this.state.showFlag} className={docnameToFill ? 'hrefinput hinputrequired' : 'hrefinput'} value={this.state.docname} placeholder="请输入资料名称" onChange={this.docnameChanged} />
                                        <div style={{ display: docnameToFill ? "block" : "none" }}><span className="hrequired">请输入资料名称</span></div>
                                        <div style={{ display: this.state.lengthexceed ? "block" : "none" }}><span className="hrequired">最多可输入50字符</span></div>
                                    </div>
                                </Col>
                                <Col md={6} sm={6} xs={6}>
                                    <div className="colBox">
                                        <div className="hinfodiv">项目类型：{this.state.cata.catalogType}</div>
                                        <div className="hinfodiv">项目经理：{this.state.project.managerName}</div>
                                        <div className="hinfodiv">开工日期：{fmtDate(this.state.project.approvalDate)}</div>
                                        <div className="hinfodiv">完工日期：{fmtDate(this.state.project.endDate)}</div>
                                    </div>
                                </Col>
                            </Row>
                            <div className="tablebox">
                                <Table columns={columns6} data={this.state.tableData} useFixedHeader={true} emptyText={() => '暂无数据'} />
                            </div>
                        </div>

                    </div>
                </div>
                <input type='file' id='selectfile' multiple='multiple' accept='.xls,.xlsx,.doc,.docx,.pdf' onChange={handleSelectFile.bind(this, 'doc')} style={{ width: 0, height: 0, opacity: 0, display: 'none' }} />
                <input type='button' id='browse' style={{ width: 0, height: 0, opacity: 0, display: 'none' }} />
                <Previewer show={this.state.showViewModal} onClose={this.closeViewModal} viewossName={this.state.viewossName} />
            </App>
        );
    }
}